<!-- 带资格角的盒子组件 -->
<template>
  <div class="box">
    <div class="header">
      <div class="left">
        <span>{{ boxTitle }}</span>

        <div class="right"
          v-if="dropDown.length">
          <div class="btn"
            @click="showDropDown = !showDropDown">
            {{ dropDownName }}
            <img src="~assets/boardImg/down.png"
              alt=""
              srcset="" />
          </div>
          <div class="Drop_down">
            <!-- 下拉菜单为父组件传入的 -->
            <div class="down_item"
              v-show="showDropDown"
              v-for="item in dropDown"
              :key="item.key"
              :label="item.label"
              @click="dropDownClick(item.key, item.label)"
              :class="activeDropDown == item.key ? 'active' : ''">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div id="echartbox"></div>
      <!-- <slot></slot> -->
    </div>
    <div class="pos pos_bl"></div>
    <div class="pos pos_br"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { lineCharts } from "@/api/all.js";
export default {
  props: {
    // 盒子标题
    boxTitle: {
      type: String,
      default: () => {
        return "标注作业";
      }
    }
    // 下拉菜单按钮名字

    // dropDownName: {
    //   type: String,
    //   default: () => {
    //     return "标签";
    //   }
    // },
    // 下拉菜单
    // dropDown: {
    //   type: Array,
    //   default: () => {
    //     return ["标签", "影像"];
    //   }
    // }
  },
  data() {
    return {
      showDropDown: false, // 是否展开下拉菜单
      activeDropDown: 0, // 当前选中的下拉菜单
      myChart: null,
      dropDownName: "标签量",
      dropDown: [{ key: "0", label: "标签量" }, { key: "1", label: "任务量" }],
      list: [],
      days: [], //日期
      annotationCount: [], //标注题数
      checkCount: [], //审核题数
      annotationItems: [], //标注标签数
      checkItemscount: [], //审核标签数
      chratOption: {
        title: {
          //   text: "Stacked Line"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["标注", "审核"],
          top: "bottom",
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "9%",
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            rotate: 60
            // textStyle: {
            //       color:'#fff'    
            //     },
          },
          
          data: [] // x轴日期集合
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "标注",
            type: "line",
            // stack: "Total",导致y轴的值是总和
            data: [] // y轴标注集合
          },
          {
            name: "审核",
            type: "line",
            // stack: "Total",
            data: [] // y轴审核集合
          }
        ]
      } // echart初始化配置
    };
  },
  methods: {
    // 获取折线图数据
    getList() {
      lineCharts()
        .then(res => {
          console.log("response", res);
          this.list = res.result || [];
          this.days = this.list.map(item => {
            return item.days;
          });
          this.annotationCount = this.list.map(item => {
            return item.annotation_count;
          });
          this.checkCount = this.list.map(item => {
            return item.check_count;
          });
          this.annotationItems = this.list.map(item => {
            return item.annotation_items_count;
          });
          this.checkItemscount = this.list.map(item => {
            return item.check_items_count;
          });
          this.showChart();
        })
        .catch(err => {
          this.showChart();
        });
    },
    // 下拉菜单被点击
    dropDownClick(idx, label) {
      this.activeDropDown = idx;
      this.$emit("dropDownClick", idx); // 返回下拉菜单点击的索引
      this.dropDownName = label;
      this.showDropDown = false;
      this.showChart();
    },
    // 渲染图表
    showChart() {
      let option = Object.assign({}, this.chratOption);
      let idx = this.activeDropDown;
      let label = this.dropDownName;
      if (idx == "0" || label == "作业量") {
        // option.xAxis.data = [
        //     "20210504",
        //     "20210505",
        //     "20210506",
        //     "20210507",
        //     "20210508",
        //     "20210509",
        //     "202105010",
        //     "202105011",
        //     "202105012",
        //     "202105013"
        //   ] || this.days;
        //    option.series[0].data = [
        //     "3",
        //     "5",
        //     "6",
        //     "7",
        //     "8",
        //     "45",
        //     "67",
        //     "78",
        //     "76",
        //     "46"
        //   ] ;
        //    option.series[1].data = [
        //     "3",
        //     "5",
        //     "8",
        //     "15",
        //     "37",
        //     "45",
        //     "67",
        //     "78",
        //     "76",
        //     "46"
        //   ] ;
        option.xAxis.data = this.days;
        option.series[0].data = this.annotationItems;
        option.series[1].data = this.checkItemscount;
      }
      if (idx == "1" || label == "任务量") {
        // option.xAxis.data = [
        //     "20210504",
        //     "20210505",
        //     "20210506",
        //     "20210507",
        //     "20210508",
        //     "20210509",
        //     "202105010",
        //     "202105011",
        //     "202105012",
        //     "202105013"
        //   ];
        option.xAxis.data = this.days;
        option.series[0].data = this.annotationCount;
        option.series[1].data = this.checkCount;
      }
      this.myChart.setOption(option);
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("echartbox"));
  }
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  background: #152149;
  background: url(~assets/boardImg/u160.svg) no-repeat;
  background-size: 100% auto;
  .header {
    height: 30px;
    // font-size: 0px;
    .left {
      // float: left;
      width: 43%;
      display: flex;
      justify-content: space-around;
      span {
        // display: inline-block;
        padding-left: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        // vertical-align: bottom;
      }
    }
    .right {
      // float: right;
      // line-height: 30px;
      position: relative;
      width: 77px;
      background: url(~assets/boardImg/u366.svg) no-repeat;
      background-size: auto 100%;
      .btn {
        line-height: 28px;
        cursor: pointer;
        width: 75px;
        padding: 2px 2px 2px 10px;
        font-family: "Arial Normal", "Arial", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        letter-spacing: normal;
        color: #0c73f5;
        vertical-align: none;
        text-align: left;
        text-transform: none;
        background-color: transparent;
        border-color: transparent;
        img {
          height: 16px;
          width: auto;
          vertical-align: middle;
        }
      }
      .Drop_down {
        position: absolute;
        min-width: 100%;
        top: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        .down_item {
          padding: 4px;
          background: #fff;
          color: #0c73f5;
          cursor: pointer;
          font-size:12px;
          text-align: center;
          &:hover {
            background: #0099ff;
            color:#fff;
          }
        }
        .active {
          background: #0099ff;
          color:#fff;
        }
      }
    }
  }
  .main {
    height: 335px;
    // overflow-y: scroll;
    #echartbox {
      height: 90%;
      width: 100%;
    }
  }
  .pos {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
  }
  .pos_bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
}
</style>
